<template>
    <div style="display: inline-block ;height: 15px">
      <el-tag
        :key="exectorPerson.userName"
        v-for="exectorPerson in exectors"
        :closable="editable"
        :disable-transitions="false"
        @close="deleteExector(exectorPerson,exectors)"
      >
        {{exectorPerson.userName}}
      </el-tag>

      <el-autocomplete
        v-show="editable"
        v-model="state4"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入内容"
        size="mini"
        @select="handleSelect"
      >
        <template slot-scope="props">
          <div>{{props.item.name}}</div>
        </template>
      </el-autocomplete>
    </div>
</template>

<script>
  //import {getemployees} from '../../../api/testmanager'
    export default {
        name: "ecectorShow",
      data(){
        return{

          state4: '',
          timeout:  null,

        }
      },
      methods:{
        deleteExector(exectorPerson,exectors){
          // console.log(JSON.stringify(testrow.tester))
          exectors.splice(exectors.indexOf(exectorPerson),1)

        },
        querySearchAsync(queryString, cb) {
          //console.log(this.employees,'employees')
          var restaurants = this.employees;
          var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

          clearTimeout(this.timeout);
         // console.log(results,'results')
          cb(results)
          /*this.timeout = setTimeout(() => {
           cb(results);
          }, 500 * Math.random());*/
        },
        createStateFilter(queryString) {
          return (emploree) => {
          return (emploree.name.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
           // return true
          };
        },
        handleSelect(item) {
          for(let t of this.exectors){
          /*  console.log('exectors:'+JSON.stringify(this.exectors))
            console.log('t:'+t)
            console.log('item'+JSON.stringify(item))*/
            if (t.userName === item.name){
              this.state4=''
              return
            }
          }
     //不存在时
            console.log(item)
            let worker={
              id:0,
              userName:'',
              userId:0
            }
            worker.userId=item.id;
            worker.userName=item.name;
            this.exectors.push(worker)


          this.state4=''
        }
      },
      props:[
        "exectors",
        "editable",
        "employees"
      ]
    }
</script>

<style scoped>

</style>
